<template>
  <!-- 头部 -->
  <div class="head">
    <div
      :class="['content', this.$store.state.locale == 'en' ? 'content-en' : '']"
    >
      <nuxt-link to="/" class="logo">
        <!-- <img
          class="logo-img"
          v-if="webConfigData.pcLogoImgText"
          :src="webConfigData.pcLogoImgText"
        /> -->
        <div class="name">
          <span class="cn">沙鲜送</span>
          <span class="en">Sha Xian Song</span>
        </div>
      </nuxt-link>
      <div :class="['menu', this.$store.state.locale == 'en' ? 'menu-en' : '']">
        <nuxt-link to="/" class="item">{{ $t('commonHead.home') }}</nuxt-link>
        <nuxt-link
          to="/list?st=0"
          :class="[
            'item',
            $route.path == '/list' && $route.query.st == 0 ? 'item-on' : '',
          ]"
          >{{ $t('commonHead.productList') }}</nuxt-link
        >
        <nuxt-link
          to="/list?st=1"
          :class="[
            'item',
            $route.path == '/list' && $route.query.st == 1 ? 'item-on' : '',
          ]"
          >{{ $t('commonHead.newProducts') }}</nuxt-link
        >
        <nuxt-link
          to="/special-discount"
          :class="['item', $route.path == '/special-discount' ? 'item-on' : '']"
          >{{ $t('commonHead.limitedTimeOffer') }}</nuxt-link
        >
        <nuxt-link
          to="/group-buy"
          :class="['item', $route.path == '/group-buy' ? 'item-on' : '']"
          >{{ $t('commonHead.groupDiscount') }}</nuxt-link
        >
        <nuxt-link
          to="/flash-sale"
          :class="['item', $route.path == '/flash-sale' ? 'item-on' : '']"
          >{{ $t('commonHead.spikeSpecial') }}</nuxt-link
        >
        <!-- <nuxt-link
          to="/coupons"
          :class="['item', $route.path == '/coupons' ? 'item-on' : '']"
          >领券中心</nuxt-link> -->
        <a
          href="javascript:void(0)"
          :class="['item', $route.path == '/coupons' ? 'item-on' : '']"
          @click="toCoupons"
          >{{ $t('commonHead.voucherCenter') }}</a
        >
      </div>
      <div class="search">
        <div class="search-input-box">
          <input
            type="text"
            v-model="searchTerms"
            class="search-input"
            @keyup.enter="toSearchProdPage"
            :placeholder="$t('searchByStOrpN')"
          />
          <div
            class="select-search"
            @click="selectChoose"
            :style="$t('language') == 'en' ? productShop : ''"
          >
            {{ searchItem }}
          </div>
          <ul class="select-list" v-if="showSelectItem">
            <li class="select-item" @click="selectSearchItem(0)">
              {{ $t('index.prod') }}
            </li>
            <li class="select-item" @click="selectSearchItem(1)">
              {{ $t('index.shop') }}
            </li>
          </ul>
        </div>
        <input
          type="submit"
          class="search-btn"
          :value="this.$t('index.search')"
          @click="toSearchProdPage"
          :style="
            $t('language') == 'en'
              ? 'letter-spacing: 0px;'
              : 'letter-spacing: 2px;'
          "
        />
      </div>
    </div>
    <!-- 登录弹窗组件 -->
    <LoginPopup v-if="showLogin" v-on:hideLoginPop="hideLoginPop" />
    <!-- /登录弹窗组件 -->
  </div>
  <!-- /头部 -->
</template>

<script>
import Cookie from 'js-cookie'
import LoginPopup from '~/components/login-popup'
export default {
  components: {
    LoginPopup,
  },
  data() {
    return {
      showLogin: false,
      searchItem: this.$t('index.prod'), //搜索框内容
      showSelectItem: false, //下拉框显隐
      searchTerms: this.$route.query.pn, //搜索词
      searchType: 0, //搜索类型 0商品 1店铺

      tabType: this.$router.history.current.query.st || 0,
      webConfigData: {},

      language: this.$store.state.locale,
      fontStyleDowmEn: {
        fontSize: '14px',
        padding: '0 15px',
      },
      productShop: {
        position: 'relative',
        left: '-9px',
      },
    }
  },
  watch: {
    $route(to, from) {
      //监听路由是否变化
      if (to.query.st != from.query.st) {
        this.tabType = to.query.st
      }
      this.searchTerms = ''
      if (!to.query.st) {
        if (to.path == '/group-buy') {
          this.tabType = 3
        } else if (this.$router.history.current.path == '/special-discount') {
          this.tabType = 2
        } else if (this.$router.history.current.path == '/flash-sale') {
          this.tabType = 4
        } else if (this.$router.history.current.path == '/coupons') {
          this.tabType = 5
        } else {
          this.tabType = 0
        }
      }
    },
    // 监听搜索框搜索词是否为空
    // searchTerms (newValue,oldValue) {
    //   if(newValue == '') {
    //     oldValue = ''
    //     this.$router.history.current.query.pn = newValue
    //   }
    //   this.$router.history.current.query.pn = newValue
    // }
  },
  created() {
    if (this.$router.history.current.path == '/group-buy') {
      this.tabType = 3
    } else if (this.$router.history.current.path == '/flash-sale') {
      this.tabType = 4
    } else if (this.$router.history.current.path == '/coupons') {
      this.tabType = 5
    } else {
      this.tabType = 0
    }
  },
  mounted() {
    // 获取网站配置信息
    this.webConfigData = JSON.parse(localStorage.getItem('webConfig') || '{}')
  },
  methods: {
    /**
     * 统一跳转方法
     */
    routeTo(e) {
      let path = e.target.dataset.route
      switch (path) {
        case 'logoIndex':
          this.$router.push({ path: '/' })
          break
        case 'index':
          this.$router.push({ path: '/' })
          break
        case 'newArrivals':
          this.$router.push({ path: '' })
          break
        case 'preferential':
          this.$router.push({ path: '' })
          break
        case 'teamBuying':
          this.$router.push({ path: '' })
          break
        case 'seckill':
          this.$router.push({ path: '' })
          break
        case 'couponCenter':
          this.$router.push({ path: 'user-center/uc-coupons' })
          break
        default:
          break
      }
    },

    /**
     * 领券中心
     */
    toCoupons() {
      // if (Cookie.get('token')) {
      //   console.log('token1:',Cookie.get('token'))
      //   this.$router.push({ path: '/coupons' })
      // } else {
      //   console.log('token2:',Cookie.get('token'))
      //   this.showLogin = true
      // }
      console.log('coupons')
      this.$router.push({ path: '/coupons' })
    },
    /**
     * 隐藏登录弹窗
     */
    hideLoginPop() {
      this.showLogin = false
    },

    /** 搜索框选择 */
    selectChoose() {
      this.showSelectItem = !this.showSelectItem
    },
    /** 点击选择 店铺 || 商品 */
    selectSearchItem(sts) {
      if (sts === 0) {
        this.searchItem = this.$t('index.prod')
        this.showSelectItem = false
        this.searchType = 0 //商品
      } else if (sts === 1) {
        this.searchItem = this.$t('index.shop')
        this.showSelectItem = false
        this.searchType = 1 //店铺
      }
    },
    /**
     * 失去焦点
     */
    // changeSearchTerms (searchTerms) {
    //   this.searchTerms = searchTerms
    //   this.toSearchProdPage
    // },
    /**
     * 搜索
     */
    toSearchProdPage() {
      var searchType = this.searchType
      console.log(this.searchTerms)
      if (this.searchTerms !== undefined) {
        var searchTerms = this.searchTerms.trim() //去除字符串的头尾空格
      }
      if (searchType == 0) {
        if (!searchTerms) {
          this.$message({
            message: this.$t('commonHead.productNameCannotBeEmpty'),
            type: 'error',
            duration: 1000,
          })
          return
        }
        // 跳转到商品列表页
        this.$router.push({ path: '/list?pn=' + searchTerms })
      } else if (searchType == 1) {
        if (!searchTerms) {
          this.$message({
            message: this.$t('commonHead.storeNameCannotBeEmpty'),
            type: 'error',
            duration: 1000,
          })
          return
        }
        // 跳转到店铺列表页
        this.$router.push({ path: '/shopList?shopName=' + searchTerms })
      }
    },
  },
}
</script>

<style scoped src='~/assets/css/home.css'></style>
